<!-- 教师主页 -->
<script setup>
import router from '@/router'
import { ArrowDown } from '@element-plus/icons-vue'

// 用户名
const name = localStorage.getItem('userName')

// 退出登录
const loginout = () => {
  sessionStorage.removeItem('token')
  localStorage.removeItem('userName')
  router.push('/')
}

// 修改头像
const updateAvatar = () => {
  router.push('avater')
}

// 修改密码
const updatePassword = () => {
  router.push('password')
}
</script>

<template>
  <div class="my-layout">
    <el-container>
      <!-- 头部 -->
      <el-header class="home-header">
        <div class="school-name">四川信息职业技术学院</div>
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="user-name">{{ name }} </span>
              <el-icon class="el-icon--right" :size="12">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>账号管理</el-dropdown-item>
                <el-dropdown-item @click="updateAvatar">修改头像</el-dropdown-item>
                <el-dropdown-item @click="updatePassword">修改密码</el-dropdown-item>
                <el-dropdown-item @click="loginout">退出空间</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <img class="avater" src="/public/images/avater.webp" alt="" />
        </div>
      </el-header>

      <el-container class="home-container">
        <!-- 侧边栏 -->
        <el-aside class="home-aside" width="12.9375rem">
          <el-scrollbar
            ><div class="user-aside">
              <img class="avater-aside" src="/public/images/avater.webp" alt="" />
              <span style="color: white">{{ name }}</span>
            </div>

            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              :unique-opened="true"
              router
              style="height: 100vh"
            >
              <el-menu-item index="/teacher/application">
                <el-icon><setting /></el-icon>
                <span>应用中心</span>
              </el-menu-item>
              <el-menu-item index="/teacher/course">
                <el-icon><setting /></el-icon>
                <span>课程</span>
              </el-menu-item>
              <el-menu-item index="/teacher/classmager">
                <el-icon><setting /></el-icon>
                <span>班级信息</span>
              </el-menu-item>
              <el-menu-item index="/teacher/inbox">
                <el-icon><setting /></el-icon>
                <span>收件箱</span>
              </el-menu-item>
              <el-menu-item index="/teacher/note">
                <el-icon><setting /></el-icon>
                <span>笔记</span>
              </el-menu-item>
              <el-menu-item index="/teacher/cloudplant">
                <el-icon><setting /></el-icon>
                <span>云盘</span>
              </el-menu-item>
              <el-menu-item index="/teacher/create">
                <el-icon><setting /></el-icon>
                <span>专题创作</span>
              </el-menu-item>
              <el-menu-item index="/teacher/resource">
                <el-icon><setting /></el-icon>
                <span>资源库</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <!-- 主内容 -->
        <el-main class="home-main">
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
.my-layout {
  background: #f0efef;

  // 头部
  .home-header {
    background: #68beb1;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // 学校名称
    .school-name {
      color: white;
      font-size: 17px;
      margin-left: 30px;
    }

    // 下拉框
    .el-dropdown-link {
      .el-icon--right {
        color: white;
      }
      .el-icon svg {
        position: relative;
        top: 0.625rem;
        left: -0.625rem;
      }
    }

    // 用户名
    .user-name {
      color: white;
      font-size: 10px;
      position: relative;
      font-size: 12px;
      top: 0.625rem;
      left: -0.625rem;
    }

    // 头像
    .avater {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%;
      margin-right: 0.625rem;
    }
  }

  // 主容器
  .home-container {
    margin-top: 1.25rem;
    height: 100vh;

    // 侧边栏
    .home-aside {
      margin-left: 1.25rem;
      border-radius: 8px;

      .user-aside {
        background: #75c3b7;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 15.625rem;
        flex-direction: column;
        gap: 20px;

        .avater-aside {
          width: 5rem;
          height: 5rem;
          border-radius: 50%;
        }
      }
    }

    // 主内容
    .home-main {
      padding: 0;
    }
  }
}
</style>
